<template>
    <div>
        <div>
            <img :src="listx.imgs" alt="" class="jack-imgs">
            <div class="posi-top">
                <p class="posi-p1">薛之谦</p>
                <span class="posi-sp1">——</span>
                <p class="posi-p2">作品合集</p>
            </div>
            <div class="jack-con">热门周边</div>
            <div class="jack-flex">
                <div v-for="(item,index) in list" @click="fj(item.id)" :key="index" class="jack-bom">
                    <img :src="item.imge" alt="" class="jack-imgx">
                    <div class="jack-text">{{item.texts}}</div>
                    <div class="jack-price">￥{{item.prices}}</div>
                </div>
            </div>
            
        </div>
    </div>
</template>

<script>
export default {
    name: 'Jacky',

    data() {
        return {
            listx:'',
            list:''
        };
    },
    created() {
        //  console.log(this.$route.params.name.listx.lis);
         this.listx=this.$route.params.name.listx
         this.list=this.$route.params.name.listx.lis
         
    },

    methods: {
         fj(id){
            let index = this.list.find(item => {
                return item.id == id
            })
            this.$router.push({
                name: "detail",
            })
         
            localStorage.setItem('namea',JSON.stringify(index))
        },
        
    },
};
</script>

<style lang="less" scoped>
.jack-imgs{
    width:100%;
    height: 240px;
}
.posi-top{
    position: absolute;
    left: 20px;
    top: 130px;
    p{margin:0;}
    .posi-p1{
        font-size: 24px;
        color:#fff;
    }
    .posi-sp1{
        color:#ccc;
    }
    .posi-p2{
        font-size: 16px;
        color:#ccc;
    }
}
.jack-con{
    font-size: 16px;
    color: #000;
    padding: 20px 0 20px 20px;
}
.jack-flex{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 0 20px 0 20px;
    .jack-bom{
        width: 167px;
        height: 210px;
        margin-bottom:50px;
        .jack-text{
            width: 180px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            padding: 10px 0 5px 0;
            font-size:15px;
        }
        .jack-price{
            font-size: 15px;
            color: red;
        }
    }
}
.jack-imgx{
    width:100%;
    height:173px;
}
</style>